import React, { Component } from 'react'
import axios from "axios";

export class Cart extends Component {
  constructor(props) {
    super(props)

    this.state = {
      cart: [],
    }
  }

  componentDidMount() {
    axios.get("/api/cart").then(res => {
      this.setState({
        cart: res.data
      })
    })
  }

  render() {
    const { cart } = this.state;
    return (
      <div className='cart'>
        <ul>
          {
            cart.length ?
              cart.map(item => {
                return <li key={item.id}>
                  <input type="checkbox" />
                  <div>
                    <img src={item.img} alt="" />
                    <p>{item.title}</p>
                    <p>￥{item.price}元</p>
                    <p>{item.num}件</p>
                  </div>
                </li>
              }) : "购物车还没有商品"
          }
        </ul>
      </div>
    )
  }
}

export default Cart